<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="/favicon.ico" />
        <title>后台管理系统</title>
        <style type="text/css">
            .page-init-loading {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .loading-icon {
                width: 30px;
                height: 30px;
                animation: animationContainer 1s ease infinite;
            }

            .loading-text {
                font-size: 14px;
                /* color: rgb(51, 126, 204); */
                color: #000;
                margin-top: 10px;
            }

            .shape {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
            }

            .shape-1 {
                background-color: #1875e5;
                left: 0;
                animation: animationShape1 0.5s ease infinite alternate;
            }

            .shape-2 {
                background-color: #c5523f;
                right: 0;
                animation: animationShape2 0.5s ease infinite alternate;
            }

            .shape-3 {
                background-color: #499255;
                bottom: 0;
                animation: animationShape3 0.5s ease infinite alternate;
            }

            .shape-4 {
                background-color: #f2b736;
                right: 0;
                bottom: 0;
                animation: animationShape4 0.5s ease infinite alternate;
            }

            @keyframes animationContainer {
                0% {
                    transform: rotate(0);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            @keyframes animationShape1 {
                0% {
                    transform: translate(0, 0);
                }

                100% {
                    transform: translate(20px, 20px);
                }
            }

            @keyframes animationShape2 {
                0% {
                    transform: translate(0, 0);
                }

                100% {
                    transform: translate(-20px, 20px);
                }
            }

            @keyframes animationShape3 {
                0% {
                    transform: translate(0, 0);
                }

                100% {
                    transform: translate(20px, -20px);
                }
            }

            @keyframes animationShape4 {
                0% {
                    transform: translate(0, 0);
                }

                100% {
                    transform: translate(-20px, -20px);
                }
            }
        </style>
    </head>
    <body>
        <noscript>
            <strong
                >We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to
                continue.</strong
            >
        </noscript>
        <div id="app">
            <div class="page-init-loading">
                <div class="loading-icon">
                    <div class="shape shape-1"></div>
                    <div class="shape shape-2"></div>
                    <div class="shape shape-3"></div>
                    <div class="shape shape-4"></div>
                </div>
                <div class="loading-text">页面加载中，请稍候...</div>
            </div>
        </div>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>
